<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:v="urn:schemas-microsoft-com:vml">

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
    <meta http-equiv='cache-control' content='no-cache'/>
    <meta http-equiv='expires' content='0'/>
    <meta name='copyright' content='Copyright (C) XXX Consultants'/>
    <meta name='robots' content='none'/>

    <link rel="stylesheet" href="/gts/css/main.css"/>
    <link rel="shortcut icon" href="/gts/images/favicon.ico"
            type="image/x-icon"/>
    <title>Create GeozoneCircle</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZKWRbzG53z_kSdLESSrIHBTwM0brOpm-All5BF6PoaKBxRWWERSvuuPZb62Q0JAotLNi5bDQg9tcaQ"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

    var map ;


    function LoadMap()
    {
    if (GBrowserIsCompatible())                 // Do Map if Compatible Browser only
    {
    map = new GMap2(document.getElementById("map"),{draggableCursor: 'crosshair', draggingCursor: 'pointer'}) ;
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl()) ;
    // map.addControl(new GOverviewMapControl()) ;

    var latlng = new GLatLng(35.036040,-89.977512) ; // Memphis Airport
    map.setCenter(latlng,4);

    GEvent.addListener(map, 'click', function(overlay, point)    // Add a click listener
    {
    if (overlay)
    {
    } else if (point)
    {
    addpoint( point ) ;
    }
    });
    } else
    {
    document.getElementById("map").innerHTML = "<h1>Browser not compatible with Google Maps. Sorry...</h1>" ;
    }
    }

    // Add a point to the textarea tracedata...



    function addpoint( point )
    {
    document.data.tracedata.value += point.toUrlValue(12) + "\n" ;
    datadraw();
    }

    // Clear the work text area and overlays...

    function dataclear()
    {
    document.data.tracedata.value = "" ;
    map.clearOverlays() ;
    }

    // Close the polyline into a polygon with the first point as the last point...

    /*
    function dataclose()
    {
    var wrkar = dataparse( document.data.tracedata.value ) ;

    if( ( wrkar[0].lat() + "," + wrkar[0].lng() ) == (wrkar[wrkar.length - 1].lat() + "," + wrkar[wrkar.length - 1].lng() ) )
    {
    alert( "Polyline is already closed!" ) ;
    } else
    {
    document.data.tracedata.value += wrkar[0].lat() + "," + wrkar[0].lng() + "\n" ;
    }
    } */

    // Draw the polylines associated with the points clicked...

    function datadraw()
    {
    map.clearOverlays() ;
    var wrkar = [] ;

    if ( document.data.tracedata.value )            // Check for tracedata
    {
    wrkar = dataparse( document.data.tracedata.value ) ;
    for(pindex=0;pindex<wrkar.length;pindex++){
    var marker = new GMarker(wrkar[pindex]);
    map.addOverlay(marker);
    }
    wrkar.push(wrkar[0])
    map.addOverlay( new GPolyline(wrkar,"#00dd00", 3, .8) ) ;
    }

    /*
    if ( document.data.savedata.value )                // Check for saved data
    {
    wrkar = dataparse( document.data.savedata.value ) ;
    wrkar.push(wrkar[0])
    map.addOverlay( new GPolyline(wrkar,"#00ff00", 3, .8) ) ;
    } */

    }

    // Save the trace data into the savedata textarea...
    /*
    function datasave()
    {
    document.data.savedata.value = document.data.tracedata.value ;
    } */

    // Parse the textarea data into a points array...
    function dataparse( points )
    {
    points = points.substr(0,points.length - 1) ;
    var linar = points.split("\n") ;                // Break each point by line break
    var wrkar = [] ;
    var pntar = [] ;
    for (var i = 0; i < linar.length; i++)
    {
    wrkar = linar[i].split(",",2) ;                // Break each point into x and y
    pntar.push( new GLatLng(parseFloat(wrkar[0]), parseFloat(wrkar[1])) ) ;
    }
    return pntar ;
    }

    // Center the map on the first marker found...
    function datacenter()
    {
    var point ;
    var wrkar = [] ;
    if ( document.data.tracedata.value )
    {
    wrkar = dataparse( document.data.tracedata.value ) ;
    } else
    {
    wrkar = dataparse( document.data.savedata.value ) ;
    }
    if ( wrkar[0] )
    {
    point = wrkar[0] ;
    }
    if ( point )
    {
    map.setCenter(point);

    } else
    {
    alert( "No points entered yet. Cannot center map." ) ;
    }
    }

    //]]>
    </script>

</head>

<body onload="LoadMap()" onunload="GUnload()" leftmargin='0'
        rightmargin='0' topmargin='0' bottommargin='0'>

<div id="spinner" class="spinner" style="display: none;"><img
        src="/gts/images/spinner.gif" alt="Spinner"/></div>
<div class="logo"><img src="/gts/images/grails_logo.jpg"
        alt="Grails"/></div>

<div class="nav">
    <span class="menuButton"><a class="home" href="${createLinkTo(dir: '')}">Home</a></span>
    <span class="menuButton"><g:link class="list" action="list">GeozonePolygon List</g:link></span>
</div>

<h1>Create GeozonePolygon</h1>
<g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
</g:if>
<g:hasErrors bean="${geozonePolygon}">
    <div class="errors">
        <g:renderErrors bean="${geozonePolygon}" as="list"/>
    </div>
</g:hasErrors>

<g:form name="data" action="save" method="post" style="width:400px;float:left">
    <div class="dialog">
        <table>
            <tbody>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="geozoneNotifyType">Geozone Notify Type:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'geozoneNotifyType', 'errors')}">
                        <g:select id="geozoneNotifyType" name="geozoneNotifyType" from="${geozonePolygon.constraints.geozoneNotifyType.inList.collect{it.encodeAsHTML()}}" value="${fieldValue(bean:geozonePolygon,field:'geozoneNotifyType')}"></g:select>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="description">Description:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'description', 'errors')}">
                        <input type="text" id="description" name="description" value="${fieldValue(bean: geozonePolygon, field: 'description')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="zoneType">Zone Type:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'zoneType', 'errors')}">
                        <g:select id="zoneType" name="zoneType" from="${geozonePolygon.constraints.zoneType.inList.collect{it.encodeAsHTML()}}" value="${fieldValue(bean:geozonePolygon,field:'zoneType')}"></g:select>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="city">City:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'city', 'errors')}">
                        <input type="text" id="city" name="city" value="${fieldValue(bean: geozonePolygon, field: 'city')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="country">Country:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'country', 'errors')}">
                        <input type="text" id="country" name="country" value="${fieldValue(bean: geozonePolygon, field: 'country')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="dateCreated">Date Created:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'dateCreated', 'errors')}">
                        <g:datePicker name="dateCreated" value="${geozonePolygon?.dateCreated}"></g:datePicker>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="devicegroup">Devicegroup:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'devicegroup', 'errors')}">
                        <g:select optionKey="id" from="${Devicegroup.list()}" name="devicegroup.id" value="${geozonePolygon?.devicegroup?.id}"></g:select>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="lastUpdated">Last Updated:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'lastUpdated', 'errors')}">
                        <g:datePicker name="lastUpdated" value="${geozonePolygon?.lastUpdated}"></g:datePicker>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="postalCode">Postal Code:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'postalCode', 'errors')}">
                        <input type="text" id="postalCode" name="postalCode" value="${fieldValue(bean: geozonePolygon, field: 'postalCode')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="stateProvince">State Province:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'stateProvince', 'errors')}">
                        <input type="text" id="stateProvince" name="stateProvince" value="${fieldValue(bean: geozonePolygon, field: 'stateProvince')}"/>
                    </td>
                </tr>

                <tr class="prop">
                    <td valign="top" class="name">
                        <label for="streetAddress">Street Address:</label>
                    </td>
                    <td valign="top" class="value ${hasErrors(bean: geozonePolygon, field: 'streetAddress', 'errors')}">
                        <input type="text" id="streetAddress" name="streetAddress" value="${fieldValue(bean: geozonePolygon, field: 'streetAddress')}"/>
                    </td>
                </tr>

                <tr>
                    <td>Red line: Trace data points:</td>
                    <td><TEXTAREA name="tracedata" rows="8" cols="30"></TEXTAREA></td>
                </tr>
                <!--
                     <tr>
                          <td>Green line: Saved data points:</td>
                          <td><textarea name="savedata" cols=30 rows=7></textarea></td>
                    </tr>
                  -->

            </tbody>
        </table>
    </div>
    <div class="buttons">
        <span class="button"><input class="save" type="submit" value="Create"/></span>
    </div>
</g:form>

<div id="map" style="width: 600px; height: 400px; float: left;"></div>
<div>
    <ul>
        <li><input type=BUTTON value="Draw" onclick="datadraw()"></li>
        <li><input type=BUTTON value="Clear" onclick="dataclear()"></li>
        <!-- <li><input type=BUTTON value="Close" onclick="dataclose()"></li> -->
        <!--<li><input type=BUTTON value="Save" onclick="datasave()"></li> -->
        <li><input type=BUTTON value="Center" onclick="datacenter()"></li>
    </ul>
</div>

</body>
</html>
